*{
    padding: 0;
    margin: 0;
    background: rgb(255, 255, 255);
}
body{
    width: 100%;
    height: 90vh;
}
.container{
    width: 100%;
    height: 100vh;
    background: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 200px;
    height: 200px;
    /* 添加过度 */
    background: linear-gradient(180deg,
    rgb(236, 18, 109),
    rgb(255, 122, 226) 30%,
    rgb(193, 52, 248)  60%,
    rgb(78, 149, 255) 100%   );
    border-radius: 50%;
    /* 添加动画! */
    animation: xuanzhuang 2s linear infinite;
}
span{
    position: absolute;
    background: rgba(95, 158, 160, 0);
    color: white;
    font-size: 20px;
}
.circle::before{
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    /* 添加过度模糊效果 */
    background: linear-gradient(180deg,
    rgb(253, 7, 220),
    rgb(255, 37, 110) 30%,
    rgb(193, 52, 248)  60%,
    rgb(78, 149, 255) 100%   );
    border-radius: 50%;
    filter: blur(35px);
}
.circle::after{
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    background:black;
    border-radius: 50%;
    filter: blur(1px);
}
@keyframes xuanzhuang{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}